<template>
  <div class="aibot">
    <h1>欢迎来到AI-Bot!</h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <h2>ChatGPT</h2>
    <el-row
      :model="chatQuery"
    >
      <el-input v-model="chatQuery.content" placeholder="请输入内容"></el-input>
      <el-button :loading="loading" type="primary" style="width:10%;margin-bottom:30px;" @click.native.prevent="handleChat">ChatGPT测试</el-button>
    </el-row>
    <h2>Calendar</h2>
    <el-calendar v-model="value">
    </el-calendar>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">

import { Component, Vue } from 'vue-property-decorator'
import axios from 'axios'
import { doLogin } from '@/constant/url'

// export default {
//   name: 'HelloWorld',
//   data() {
//     return {
//       msg: 'Welcome to AI-bot！',
//       value: new Date()
//     }
//   }
// }
@Component({
  name: 'aibot'
})
export default class extends Vue {
  private chatQuery = {
    role: 'user',
    content: 'hello'
  }

  private handleChat() {
    axios({
      url: 'http://0.0.0.0:5917/openai/chat',
      method: 'post',
      headers: { 'content-type': 'application/json' },
      data: [this.chatQuery]
    }).then(res => {
      console.log('get res')
      console.log(res)
      return res
    })
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
/* tabs标签页居中 */
::v-deep .el-tabs__nav-scroll{
  width: 50%;
  margin: 0 auto;
}
.aibot {
  /*height: 100%;*/
  width: 100%;
  overflow: hidden;
  /*background-color: $loginBg;*/
  padding: 100px;
}
</style>
